<script setup>
import {BaseImgUrl, BaseURL} from "../utils/lshttp";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {ref} from "vue";
import {onAddToFavorites, onLoad, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
import {rankingListAPI} from "../services/me";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
// #ifdef H5
import jweixin from 'weixin-js-sdk'
// #endif
const commonInfoStore = useCommonInfoStore()
const useUser = useUserInfoStore()
const user_order = ref()
const list = ref([])

onLoad(async () => {
  const res = await rankingListAPI()
  user_order.value = res.result.my
  list.value = res.result.list
  commonInfoStore.setWxShare("message", user_order.value.all_money, useUser.userInfo.id);
  // #ifdef H5
  await wxShare()
  // #endif
})

// 转发到聊天界面
onShareAppMessage(() => {
  return commonInfoStore.setWxShare("message", user_order.value.all_money, useUser.userInfo.id);
})

// 转发到朋友圈
onShareTimeline(() => {
  return commonInfoStore.setWxShare("friend", user_order.value.all_money, useUser.userInfo.id);
})
// 添加到收藏
onAddToFavorites(() => {
  return commonInfoStore.setWxShare("favorite", user_order.value.all_money, useUser.userInfo.id);
});
// H5分享
const wxShare = async () => {
  await commonInfoStore.initJSDKConfig(true)
  jweixin.ready(() => {
    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    jweixin.updateAppMessageShareData({
      title: '领食周边购', // 分享标题
      desc: "本地优惠，就在领食", // 分享描述
      link: BaseURL + "/#/?parent_id=" + useUser.userInfo.id, // 分享链接
      imgUrl: "https://lsz.lszbg.com/imgs/share/share_bg.png", // 分享图标
    });
    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    jweixin.updateTimelineShareData({
      title: '领食周边购', // 分享标题
      link: BaseURL + "/#/?parent_id=" + useUser.userInfo.id, // 分享链接
      imgUrl: "https://lsz.lszbg.com/imgs/share/share_bg.png", // 分享图标
    });
  })
}
const wxShareTip = ref(false)
const h5Share = () => {
  wxShareTip.value = true
}
const shareClick = () => {
  wxShareTip.value = false
}
// 分享到微信好友
const handleShareWechat = () => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneSession",
    type: 5,
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/index/index?parent_id=" + useUser.userInfo.id,
      webUrl: BaseURL + '/#/?parent_id=' + useUser.userInfo.id,
      // type: 1
    },
    href: BaseURL + '/#/?parent_id=' + useUser.userInfo.id,
    title: user_order.value.all_money ? '用领食,我总共节省了' + user_order.value.all_money + '元,快来看看你的吧' : '点外卖用领食周边购，每餐只要0-5元',
    summary: user_order.value.all_money ? '用领食,我总共节省了' + user_order.value.all_money + '元,快来看看你的吧' : '点外卖用领食周边购，每餐只要0-5元',
    imageUrl: "https://lsz.lszbg.com/imgs/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}
</script>

<template>

  <view class="foodie_top">

    <view class="top_bg">
      <image class="foodieBg"
             src="https://img.alicdn.com/imgextra/i1/3829152210/O1CN01soG6oA1SCE3AsnXXM_!!3829152210.png"></image>
    </view>

    <view class="foodie_total" style="margin-top: 0">
      <u-navbar title="吃货榜单" placeholder autoBack titleStyle="color:white" leftIconColor="#fff"
                bgColor="#248DF1"></u-navbar>
      <view class="foodie_title">
        <view class="chbd_title">
          <image src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01VSoo3Z1SCE3DOizbk_!!3829152210.png">
          </image>
        </view>
        <view class="mf_text">白吃有理，免费无罪</view>
      </view>
      <!-- 节省 -->
      <view class="save">
        <view class="save_title">
          <image :src="BaseImgUrl + '/images/bd_bg.png'"></image>
          <text>累计帮您节省了{{ user_order?.all_money }}元</text>
        </view>
        <view class="white_box">
          <view class="head_img">
            <image :src="user_order?.avatar"></image>
          </view>
          <view class="title">{{ user_order?.nickname }}</view>
          <view class="myRanking">
            <!-- 1 -->
            <view class="ranking_whole">
              <view class="whole_left">我的排名</view>
              <view class="whole_right">{{ user_order?.ranking >= 0 ? user_order?.ranking + 1 : '***' }}名
              </view>
            </view>
            <!-- 2 -->
            <view class="ranking_whole">
              <view class="whole_left">距离上一名差</view>
              <view class="whole_right wha">{{ user_order?.disparity >= 0 ? user_order?.disparity : '***' }}元
              </view>
            </view>
            <!-- 3 -->
            <view class="ranking_whole">
              <view class="whole_left">累计节省</view>
              <view class="whole_right whb">{{ user_order?.all_money >= 0 ? user_order?.all_money : '***' }}元
              </view>
            </view>
            <!-- 4 -->
            <view class="ranking_whole">
              <view class="whole_left">累计订单</view>
              <view class="whole_right whc">{{
                  user_order?.create_order_num >= 0 ? user_order?.create_order_num : '***'
                }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 排行榜 -->
      <view class="charts">
        <view class="phb_title">
          <image :src="BaseImgUrl + '/images/phb_bg.png'"></image>
          <text class="phb_text">排行榜</text>
        </view>
        <!-- 标题 -->
        <view class="charts_title">
          <view>排名</view>
          <view>用户</view>
          <view>节省金额</view>
        </view>
        <!-- 名次 -->
        <view class="charts_first" v-if="list.length>0">
          <!-- 1 -->
          <view class="first">
            <view>
              <image :src="BaseImgUrl + '/images/first.png'"></image>
            </view>
            <view>{{ list[0]['nickname'] }}</view>
            <view>{{ list[0]['all_money'] }}</view>
          </view>
          <!-- 2 -->
          <view class="first">
            <view>
              <image :src="BaseImgUrl + '/images/first1.png'"></image>
            </view>
            <view>{{ list[1]['nickname'] }}</view>
            <view>{{ list[1]['all_money'] }}</view>
          </view>
          <!-- 3 -->
          <view class="first">
            <view>
              <image :src="BaseImgUrl + '/images/first2.png'"></image>
            </view>
            <view>{{ list[2]['nickname'] }}</view>
            <view>{{ list[2]['all_money'] }}</view>
          </view>
          <!-- 4 -->
          <view v-for="(item, index) in list" :key="index">
            <view class="first first_number" v-if="index > 2">
              <view style="text-align: center;width: 40rpx">{{ index + 1 }}</view>
              <view>{{ item.nickname ? item.nickname : "领食用户" }}</view>
              <view>{{ item.all_money }}</view>
            </view>
          </view>
        </view>
        <text class="scroll_text">滚动查看完整榜单</text>
      </view>
      <!-- 分享朋友圈 -->
      <view style="width:100%;height:64rpx"></view>

      <view style="z-index: 1000">
        <!-- #ifdef MP -->
        <button class="complete1" style="z-index: 1000" open-type="share">分享赚钱</button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <button class="complete1" style="z-index: 1000" @click="handleShareWechat">分享赚钱</button>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <button class="complete1" style="z-index: 1000" @click="h5Share">分享赚钱</button>
        <!-- #endif -->
      </view>
    </view>
    <!-- #ifdef H5 -->
    <view class="share_box_shadow" v-if="wxShareTip" @click="shareClick">
      <image mode="widthFix" :src="BaseImgUrl + '/images/share_line.png'"></image>
    </view>
    <!-- #endif -->
  </view>
</template>
<style lang="scss">
.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #248DF1, #248DF1);
}
</style>
<style lang="scss" scoped>

.share_box_shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
}

.share_box_shadow image {
  max-width: 80%;
  margin: 10%;
}

.share_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
}

.share_box image {
  max-width: 80%;
  margin: 10%;
}

/* 吃货榜单 */
page {
  width: 100%;
  height: 100%;
}

.foodie_top {
  width: 100%;
  height: 2580rpx;
}

.return_img {
  width: 20rpx;
  height: 32rpx;
}

.foodie_top .top_bg {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #248DF1;
}

.foodie_top .foodieBg {
  width: 100%;
  height: 822rpx;
}

.foodie_total {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -60rpx;
}

.foodie_title {
  width: 100%;
  height: 109rpx;
  margin-top: 120rpx;
}

.foodie_title .chbd_title {
  width: 452rpx;
  height: 96rpx;
  margin: 0 auto;
}

.foodie_title .chbd_title image {
  width: 100%;
  height: 100%;
}

.foodie_title view:first-child {
  font-size: 48rpx;
  color: #fff;
  font-weight: bold;
}

.foodie_title view:last-child {
  font-size: 28rpx;
  color: rgba(255, 224, 150, 1);
  text-align: center;
}

/* 节省 */
.save {
  width: 718rpx;
  height: 794rpx;
  margin: 150rpx auto 0;
  position: relative;
}

.save .save_title {
  width: 100%;
  height: 101rpx;
  line-height: 101rpx;
  font-size: 36rpx;
  color: rgba(146, 51, 0, 1);
  text-align: center;
  border-radius: 28rpx 28rpx 0 0;
  font-weight: 500;
  position: absolute;
  top: -50rpx;
  z-index: 2;
}

.save .save_title image {
  width: 100%;
  height: 100%;
}

.save .save_title text {
  position: absolute;
  top: -7rpx;
  left: 0;
  right: 0;
  margin: auto;
}

.save .white_box {
  background-color: #fff;
  width: 654rpx;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding-top: 80rpx;
  border-radius: 16rpx;
}

.save .white_box > .head_img {
  width: 160rpx;
  height: 160rpx;
  background-color: rgba(250, 70, 35, 0.13);
  box-sizing: border-box;
  padding: 10rpx;
  border-radius: 50%;
  margin: 0 auto;
}

.save .white_box > .head_img image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.save .title {
  font-size: 32rpx;
  color: rgba(17, 17, 17, 1);
  text-align: center;
  margin-top: 56rpx;
}

.myRanking {
  width: 516rpx;
  height: 406rpx;
  margin: 20rpx auto 0;
}

.ranking_whole {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
}

.whole_left {
  text-align: right;
  display: inline-block;
  width: 212rpx;
  height: 100%;
  font-size: 28rpx;
  color: rgba(17, 17, 17, 1);
}

.whole_right {
  display: inline-block;
  margin-top: 28rpx;
  margin-left: 20rpx;
  width: 275rpx;
  height: 30rpx;
  background: linear-gradient(to left, #56A2FF, #4CCAFF);
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #fff;
  line-height: 30rpx;
  text-indent: 30rpx;
}

.wha {
  width: 206rpx !important;
}

.whb {
  width: 246rpx !important;
}

.whc {
  width: 166rpx !important;
}

/* 排行榜 */
.charts {
  width: 640rpx;
  margin: 60rpx auto 0;
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  padding-top: 80rpx;
  padding-bottom: 60rpx;
  border-radius: 16rpx;
}

.charts .phb_title {
  width: 340rpx;
  height: 86rpx;
  position: absolute;
  top: -52rpx;
  left: 0;
  right: 0;
  margin: auto;
}

.charts .phb_title image {
  width: 100%;
  height: 100%;
}

.charts .phb_text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-size: 28rpx;
  color: rgba(146, 51, 0, 1);
  font-weight: bold;
  text-align: center;
  line-height: 58rpx;
}

/* 标题 */
.charts_title {
  line-height: 72rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 588rpx;
  height: 72rpx;
  background: rgba(255, 198, 60, 1);
  border-radius: 25rpx;
  margin: 0 auto 0;
}

.charts_title view {
  color: #ecf5ff;
  font-size: 24rpx;
}

.charts_first {
  width: 588rpx;
  height: 499rpx;
  margin: 0 auto;
  overflow: auto;
}

.charts .scroll_text {
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
  text-align: center;
  margin-top: 60rpx;
  display: inline-block;
  width: 100%;
}

.first {
  width: 100%;
  height: 85rpx;
  line-height: 85rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}

.first view image {
  width: 39rpx;
  height: 43rpx;
  position: relative;
  top: 11rpx;
  margin-left: 20rpx;
}

.first view {
  color: #222;
  font-size: 24rpx;
}

.first view:nth-child(2) {
  width: 260rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first view:last-child {
  color: rgba(248, 48, 36, 1);
  font-size: 20rpx;
  font-weight: bold;
}

.first_number view:first-child {
  color: #212223;
  margin-left: 20rpx;
}

.first_number view:last-child {
  color: #666;
}

/* 查看完整榜单 */
.complete1 {
  width: 682rpx;
  height: 92rpx;
  background: linear-gradient(to right, rgba(254, 252, 168, 1), rgba(255, 184, 0, 1));
  border-radius: 46rpx;
  margin: 20rpx auto;
  font-weight: bold;
  color: rgba(79, 38, 0, 1);
  font-size: 36rpx;
  line-height: 92rpx;
  text-align: center;
  position: fixed;
  left: 34rpx;
  bottom: 45rpx;
  box-shadow: 0 3rpx 10rpx 3rpx rgba(124, 2, 2, 0.31);
}

.complete {
  width: 320rpx;
  height: 64rpx;
  background: #ffdd4d;
  border-radius: 32rpx;
  margin: 20rpx auto;
  color: #222;
  font-size: 32rpx;
  line-height: 64rpx;
  text-align: center;
}

/* 二维码 */
.code {
  width: 640rpx;
  height: 660rpx;
  margin: 0 auto;
}

.code image {
  width: 397rpx;
  height: 397rpx;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 分享朋友圈 */
</style>
